<style scoped>
.ss_div_main{
  position: relative !important;
  width:100%;
  height:100%;
  overflow-y: scroll;

  display: flex;
  flex-direction:column;
  /*border: 1px red solid;*/
}
.ss_div_main::-webkit-scrollbar { width: 0; height: 0; }
.ss_div_c01{
  height: 8rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  background-image: linear-gradient(to right, #4B8EFF, #3177FF);
}
.ss_div_c02{
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 1rem;
  background-image: linear-gradient(to bottom, #f4f5f9, #d5e3fd 1%, #f4f5f9 30%,#f4f5f9);
  background-color: transparent;
  /*border: 1px red solid;*/

  flex-grow: 1;
}
.ss_div_c02_card{
  margin-top: 10px;
  min-height: 80px;
  border-radius: 10px;
  background-color: #ffffff;
}

.ss_div_search_c{
  display: flex;
  flex-direction:row;
}
.ss_div_search{
  height: 50px;
  width: calc(100% - 35px);
  padding-right: 10px;

  display: flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
.ss_div_search .van-search__content{
  height: 30px;
  background-color: #ffffff !important;
}
.ss_div_search_right{
  padding-left: 5px;
  padding-top: 3px;
  color: #ffffff;
  font-size: 2rem;

  display: flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
.ss_div_menu{
  margin-top: 10px;

  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:flex-start;

  background-color: transparent;
}
.ss_div_child_menu{
  width: 24%;
  height: 70px;
  margin-left: 0.8%;

  display: flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.div_flow_grid{
  float: left;
  width: 60px;
  margin-left: calc(16.66% - 50px);
  margin-top: 14px;
  text-align: center;
  background-color: #ffffff;
}
.div_flow_grid_image{
  margin-bottom: 3px;
}
.div_flow_grid_text{
  font-size: 0.9rem;
  color: #505968;
}

.ss_div_center_card{
   position: relative;
   top: 30px;
   left: 10px;
   right: 10px;
   width: calc(100% - 20px);
   height: calc(100% - 60px);
   overflow-y: scroll;
   border-radius: 10px;
   background-color: #ffffff;
   box-shadow: 0px 0px 2px rgba(0,37,57,0.2);
 }
.ss_b_div_01{
  width: 60px;
  height: 18px;
  border-radius: 7px;
  background-color: #EDF3FF;
  color: #9f9f9f;
  font-size: 0.8rem;

  display: flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
.ss_b_div_02{
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background-color: #ED513A;
  color: #ffffff;
  font-size: 0.8rem;

  display: flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
.ss_b_div_03{
  margin-top: 14px;
  font-size: 0.9rem;

  display: flex;
  flex-direction:row;
  justify-content:flex-start;
  align-items:center;
}

</style>
<template>
  <div class="ss_div_main">
    <div v-show="!taskEditShow" class="ss_div_c01" >
      <div class="ss_div_search_c">
        <div class="ss_div_search">
          <van-search v-model="search_value" placeholder="搜索" input-align="right"
                      style="width: 100%;height: 35px;border-radius: 20px;" />
        </div>
        <div class="ss_div_search_right"><van-image width="24" src="/images/mob-icon-studio_01.svg" /></div>
      </div>
      <div class="ss_div_menu">
        <div v-for="cItem in menuList" class="ss_div_child_menu"
             @click="clickMenu(cItem)">
          <van-image width="30" height="30" :src="cItem.mob_icon" />
          <div style="color: #ffffff;margin-top: 5px;">{{cItem.name}}</div>
        </div>
      </div>
    </div>
    <div v-show="!taskEditShow" class="ss_div_c02" >
      <div class="ss_div_c02_card" style="height: 150px;">
        <div v-for="item in flowList" class="div_flow_grid" @click="showTaskEdit_create(item)">
          <div class="div_flow_grid_image">
            <van-image width="30" :src="flowIcon[item.code]!=null?flowIcon[item.code]:flowIcon['nothing']"/>
          </div>
          <div class="div_flow_grid_text">{{item.title}}</div>
        </div>
      </div>
      <div class="ss_div_c02_card" style="padding: 10px;color: #505968;"
           @click="$router.push({ path: '/business/cms/notice' })">
        <div style="height: 24px;">
          <div style="float: left;font-size: 1rem;margin-top: -3px;">通知公告</div>
          <div style="float: right;margin-top: 2px;">
            <div class="ss_b_div_01" style="float: left;margin-right: 5px;">查看全部</div>
            <div class="ss_b_div_02" style="float: left;margin-right: 7px;"><div style="margin-top: -1px;">{{newNum}}</div></div>
            <div style="float: left;;margin-top: -1px;"><van-image height="12" src="/images/mob-icon-arrow.svg" /></div>
          </div>
        </div>
        <div>
          <div v-for="item in newList" class="ss_b_div_03">
            <van-image width="20" src="/images/mob-icon-new.svg" />
            <span style="margin-left: 14px;align-self:flex-end;">{{item.title}}</span>
            <span style="color: #9f9f9f;flex-grow:1;text-align: right;">{{item.publish_time}}</span>
          </div>
        </div>
      </div>
      <div class="ss_div_c02_card" style="padding: 10px;color: #505968;"
           @click="$router.push({ path: '/business/cms/news' })">
        <div style="height: 24px;">
          <div style="float: left;font-size: 1rem;margin-top: -3px;">新闻动态</div>
          <div style="float: right;margin-top: 2px;">
            <div class="ss_b_div_01" style="float: left;margin-right: 5px;">查看全部</div>
            <div class="ss_b_div_02" style="float: left;margin-right: 7px;"><div style="margin-top: -1px;">{{noticeNum}}</div></div>
            <div style="float: left;margin-top: -1px;"><van-image height="12" src="/images/mob-icon-arrow.svg" /></div>
          </div>
        </div>
        <div>
          <div v-for="item in noticeList" class="ss_b_div_03">
            <van-image width="20" src="/images/mob-icon-notice.svg" />
            <span style="margin-left: 14px;align-self:flex-end;">{{item.title}}</span>
            <span style="color: #9f9f9f;flex-grow:1;text-align: right;">{{item.publish_time}}</span>
            <br/>
          </div>
        </div>
      </div>
      <div style="text-align: center;font-size: 0.9rem;color: #999999;padding-top: 15px;">
        <van-image width="25" src="/images/mob-icon-studio_02.svg" />
        <div style="margin-top: 3px;padding-bottom: 20px;">设置管理首页项目卡片</div>
        <span style="background-color:#E3EAFA;border-radius:3px;opacity:0.9;padding-top:5px;padding-bottom:5px;padding-left:15px;padding-right:15px;">
          前往设置</span>
      </div>
    </div>

    <div v-show="taskEditShow"
         style="position: relative;left:10px;top:20px;font-size: 2rem;color: #ffffff;" >
      <van-icon name="arrow-left" style="float: left;" @click="taskEditShow=false" />
    </div>
    <div v-show="taskEditShow" class="ss_div_center_card">
      <elm-mob-flow-secform v-if="taskEditShow && taskEditData.type=='flow_task' && taskEditData.url==node_url_flowsec_form"
                            :flow_code="taskEditData.flow_code" :data_id="taskEditData.id"
                            :nodeins_id="taskEditData.nodeins_id" :page_type="taskEditPageType"
                            :pb_flag="taskEditPbFlag" @push_back_show="pushBackShow"
                            @after_submit="taskSubmited"></elm-mob-flow-secform>
      <elm-mob-task-rwzp v-if="taskEditShow && taskEditData.type=='yw_task' && taskEditData.url==task_url_rwzp"
                         :task_id="taskEditData.id" @after_submit="taskSubmited"></elm-mob-task-rwzp>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      search_value:'',
      menuList:[],

      flowList:[],

      taskEditShow:false,
      taskEditPageType:'',
      taskEditData: {},
      taskEditPbFlag:'no',

      node_url_flowsec_form:'/system/flow/one_road_flowsec_form_s',
      task_url_rwzp:'/business/pmis/rwzp_edit',

      flowIcon:{
        'ask_leave':'/images/mob-icon-flow-01.svg',
        'bms_payment':'/images/mob-icon-flow-02.svg',
        'bms_reim':'/images/mob-icon-flow-03.svg',
        'business_trip':'/images/mob-icon-flow-05.svg',
        'use_car':'/images/mob-icon-flow-06.svg',
        'one_road_flow_0001':'/images/mob-icon-flow-07.svg',
        'flow_0001':'/images/mob-icon-flow-07.svg',
        'nothing':'/images/mob-icon-flow-04.svg',
      },


      newList:[],
      newNum:0,
      noticeList:[],
      noticeNum:0,
    }
  },
  mounted() {
    this.v_GetMenu();
    this.v_getFlow();
    this.v_getNewAndNotice();
  },
  methods: {
    async v_getNewAndNotice(){
      this.newList = [];
      this.noticeList = [];
      let newList = await elm.post('/business/my/GetNewsData', {});
      let noticeList = await elm.post('/business/my/GetNoticeData', {});
      this.newNum = newList.length;
      this.noticeNum = noticeList.length;
      for(let i=0;i<2;i++){
        if(i<newList.length){
          let item = newList[i];
          if(!this.em(item.title) && item.title.length>13){item.title = item.title.substring(0,12)+'…';}
          if(!this.em(item.publish_time) && item.publish_time.length>10){item.publish_time = item.publish_time.substring(0,10);}
          this.newList.push(item);
        }
        if(i<noticeList.length){
          let item = noticeList[i];
          if(!this.em(item.title) && item.title.length>13){item.title = item.title.substring(0,12)+'…';}
          if(!this.em(item.publish_time) && item.publish_time.length>10){item.publish_time = item.publish_time.substring(0,10);}
          this.noticeList.push(item);
        }
      }
    },
    v_GetMenu:function(){
      let menuList = [];
      for(let i=0;i<elm.info.menu.length && menuList.length<4;i++){
        let item = elm.info.menu[i];
        if(item.name.indexOf('移动端')!=0 && item.name!='首页' && item.name!='功能' && item.name!='待办' && item.name!='我的'
            && item.name!='通知新闻' && item.name!='流程中心' && item.name!='系统设置'
            && item.name!='工作台' && item.name!='临时-测试'){

          if(item.name=='经营分析' || item.name=='项目管理' || item.name=='订单合同' || item.name=='费用管理'){
            item['mob_icon'] = this.v_GetMenuIcon(item.name);
            menuList.push(item);
          }
        }
      }
      this.menuList = menuList;
    },
    v_GetMenuIcon:function(name){
      let data = {
        '经营分析':'经营分析.svg','项目管理':'项目管理.svg','订单合同':'订单合同.svg','费用管理':'费用管理.svg',
      };
      let url = '/images/mob-menu-icon/00_default.svg';
      if(data[name]!=null){
        url = url.replace('00_default.svg',data[name]);
      }
      return url;
    },
    clickMenu:function(data){
      return;
      this.$router.push({ path: data.navigateurl });
    },


    async v_getFlow(){
      let flowList = await elm.post('/system/login/flow/GetAllFlowCodeWithSecFrom', {});
      let listA = [];
      let listB = [];
      for(let i=0;i<flowList.length;i++){
        let item = flowList[i];
        if(this.flowIcon[item.code]!=null){listA.push(item);}
        else{listB.push(item);}
      }
      flowList = listA;
      for(let i=0;i<listB.length;i++){
        flowList.push(listB[i]);
      }

      this.flowList = flowList;
    },
    showTaskEdit_create:function(item){
      this.taskEditPageType = 'create';
      let data = {
        'flow_code':item.code,
        'type':'flow_task',
        'url':this.node_url_flowsec_form,
      };
      this.taskEditData = data;
      this.taskEditShow = true;
    },
    taskSubmited:function(){
      this.taskEditShow = false;
      this.taskEditData = {};
    },
    pushBackShow:function (){
      this.taskEditPbFlag = 'yes';
    },

    em: function (s) {
      if (s == null || s == '') { return true; }
      else { return false; }
    },

  }
}
</script>
